<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<div class="panel-item" data-title="">
					<div class="section-title">活动信息</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label">活动标题</div>
							<div class="val">
								<el-input v-model="form.title" placeholder="">
								</el-input>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label">活动时间</div>
							<div class="val">
								<el-date-picker v-model="datetime_range" :picker-options="pickerOptions"
									type="datetimerange" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
									range-separator="至" start-placeholder="活动开始时间" end-placeholder="活动结束时间">
								</el-date-picker>
							</div>
						</div>
					</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label">活动状态</div>
							<div class="val">
								<el-radio-group v-model="form.status" class="column">
									<el-radio :label="1">开启</el-radio>
									<el-radio :label="0">关闭</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>
				</div>

				<div class="panel-item" data-title="商品">
					<div class="section-title flex-between">
						<div class="title-text">组合下单商品</div>
						<el-button type="primary" @click="do_add_product()"> 增加商品 </el-button>
					</div>
					<div class="table-wrap">
						<div class="table-sec">
							<div class="table-box">
								<el-table ref="multipleTable" :data="condition_product" fit stripe highlight-current-row
									min-width="100px" style="width: 100%">
									<!-- @selection-change="handleSelectionChange1" -->
									<!-- <el-table-column type="selection" width="55"> </el-table-column> -->

									<el-table-column label="图片" width="80px">
										<template slot-scope="scope">
											<span class="cus-poster">
												<!-- <img :src="'https://omo-oss-image.thefastimg.com/' + scope.row.image_2b5N8b00" alt="" class="cate-poster" /> -->
												<el-image style="width: 30px; height: 30px" :src="scope.row.thumb"
													:preview-src-list="[scope.row.thumb]">
												</el-image>
											</span>
										</template>
									</el-table-column>
									<el-table-column label="产品名称">
										<template slot-scope="scope">
											<span>{{ scope.row.title }}</span>
										</template>
									</el-table-column>
									<el-table-column label="产品规格">
										<template slot-scope="scope">
											<span>{{ scope.row.keyVals }}</span>
										</template>
									</el-table-column>
									<el-table-column label="分类">
										<template slot-scope="scope">
											<span class="cus-miaoshu">{{ scope.row.channelTitle }}</span>
										</template>
									</el-table-column>
									<el-table-column label="产品价格">
										<template slot-scope="scope">
											<span>{{ scope.row.priceSale }}</span>
										</template>
									</el-table-column>



									<el-table-column fixed="right" label="操作" width="50px">
										<template slot-scope="scope">
											<el-link type="primary" @click="product_remove(scope.row)">移除</el-link>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
				</div>


				<div class="panel-item" data-title="商品">
					<div class="section-title flex-between">
						<div class="title-text">赠送商品</div>
						<el-button type="primary" @click="gift_do_add_product()"> 增加商品 </el-button>
					</div>
					<div class="table-wrap">
						<div class="table-sec">
							<div class="table-box">
								<el-table ref="multipleTable" :data="gift_product" fit stripe highlight-current-row
									min-width="100px" style="width: 100%">
									<!-- @selection-change="gift_handleSelectionChange1" -->
									<!-- <el-table-column type="selection" width="55"> </el-table-column> -->

									<el-table-column label="图片" width="80px">
										<template slot-scope="scope">
											<span class="cus-poster">
												<!-- <img :src="'https://omo-oss-image.thefastimg.com/' + scope.row.image_2b5N8b00" alt="" class="cate-poster" /> -->
												<el-image style="width: 30px; height: 30px" :src="scope.row.thumb"
													:preview-src-list="[scope.row.thumb]">
												</el-image>
											</span>
										</template>
									</el-table-column>
									<el-table-column label="产品名称">
										<template slot-scope="scope">
											<span>{{ scope.row.title }}</span>
										</template>
									</el-table-column>
									<el-table-column label="产品规格">
										<template slot-scope="scope">
											<span>{{ scope.row.keyVals }}</span>
										</template>
									</el-table-column>
									<el-table-column label="分类">
										<template slot-scope="scope">
											<span class="cus-miaoshu">{{ scope.row.channelTitle }}</span>
										</template>
									</el-table-column>
									<el-table-column label="产品价格">
										<template slot-scope="scope">
											<span>{{ scope.row.priceSale }}</span>
										</template>
									</el-table-column>

									<el-table-column label="至少应购买数量">
										<template slot-scope="scope">
											<div class="input-box">
												<el-input v-model="scope.row.man"></el-input>
											</div>
										</template>
									</el-table-column>

									<!-- <el-table-column label="至少应购买数量">
										<template slot-scope="scope">
											<div class="input-box">
												<el-input v-model="scope.row.man"></el-input>
											</div>
										</template>
									</el-table-column> -->

									<el-table-column fixed="right" label="操作" width="50px">
										<template slot-scope="scope">
											<el-link type="primary" @click="gift_product_remove(scope.row)">移除</el-link>
										</template>
									</el-table-column>
								</el-table>
							</div>

						</div>
					</div>
				</div>


			</div>
		</div>

		<div class="footer-actions">
			<!-- <el-button @click="formCancel()"> 取消 </el-button> -->
			<el-button type="primary" @click="doSubmit()"> 保存 </el-button>
		</div>

		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>


		<product_guige_choose_modal ref="product_guige_choose_modal" @confirm="confirm_choose_guige" />
	</div>
</template>

<script>
import dayjs from 'dayjs';
import product_guige_choose_modal from '@/components/product/product_guige_choose_modal.vue'

import {
	mapState
} from "vuex";
export default {
	name: "news",
	components: {
		product_guige_choose_modal
	},
	data() {
		let today_time_ms = dayjs().startOf('day').valueOf()

		return {
			datetime_range: [],
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < today_time_ms;
				},
			},

			active_id: this.$route.query.id,

			form: {
				id: "",
				title: "",
				startTime: "",
				endTime: "",
				status: 1,
				guizes: "",
				type: "1", //促销规则：1-满赠 2-满减 3-满折 4-秒杀
				accordType: "1", //促销类型：1-按数量 2-按金额 3-秒杀
				areaIds: "",
				mendianIds: "",
				pdtIds: "",
			},

			//
			dialogImageUrl: "",
			dialogVisible: false,


			condition_product: [], //组合商品
			gift_product: [], //赠送商品
			product_type: ''
		};
	},
	computed: {},
	watch: {
		datetime_range(value) {
			console.log('watch, datetime_range,', value)

			this.form.startTime = value[0] || ''
			this.form.endTime = value[1] || ''
		}
	},
	created() {
		if (this.active_id) {
			this.setView();
		}
	},
	mounted() { },
	methods: {
		setView() {
			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "yingxiao_getSeckillInfo",
					id: this.active_id
				},
			}).then((res) => {
				let data = res.data;
				if (res.code == 200) {
					this.info = data;
					this.form = {
						id: data.id,
						title: data.title,
						startTime: data.startTime,
						endTime: data.endTime,
						status: data.status,
						guizes: data.guizes,
						type: 1,
						accordType: 1,
						areaIds: data.areaIds,
						mendianIds: data.mendianIds,
						pdtIds: data.pdtIds,
					};


					if (data.endTime) {
						this.datetime_range = [data.startTime, data.endTime]
					}

					// 条件商品
					if (data.productList && data.productList.length) {
						this.condition_product = data.productList
					}
					//赠品
					if (data.productList && data.productList.length) {
						this.condition_product = data.productList
					}

					if (data.guizes) {
						this.gift_product = data.guizes.map(v => ({

							...v.inventory,
							...v,
						}))
					}

				}
			});
		},

		//活动商品设置
		do_add_product() {
			this.product_type = '条件商品'
			this.$refs.product_guige_choose_modal.init()
		},
		confirm_choose_guige(items) {
			this.$log('追加已选商品', items)

			if (this.product_type == '赠品') {
				this.gift_confirm_choose_guige(items)
				return
			}

			let new_items = JSON.parse(JSON.stringify(items))
			new_items.forEach(v => {
				v.man = '';
			})
			this.condition_product = this.condition_product.concat(new_items)
		},

		handleSelectionChange1(items) {
			console.log("已选产品", items);
			this.select_items = items;
		},
		product_remove(row) {
			let index = this.condition_product.findIndex(v => v.id == row.id)
			this.condition_product.splice(index, 1)
		},
		//活动商品设置


		//赠品设置
		gift_do_add_product() {
			this.product_type = '赠品'
			this.$refs.product_guige_choose_modal.init()
		},
		gift_confirm_choose_guige(items) {
			this.$log('追加已选商品', items)

			let new_items = JSON.parse(JSON.stringify(items))
			new_items.forEach(v => {
				v.man = '';
			})
			this.gift_product = this.gift_product.concat(new_items)
		},

		gift_handleSelectionChange1(items) {
			console.log("已选产品", items);
			this.select_items = items;
		},
		gift_product_remove(row) {
			let index = this.gift_product.findIndex(v => v.id == row.id)
			this.gift_product.splice(index, 1)
		},
		//赠品设置




		doSubmit() {
			//下单需满足条件的商品
			let pdtIds = this.condition_product.map(v => v.id).join(',')

			//下单需满足条件的商品
			let guizes_list = this.gift_product.map(v => ({
				"inventoryId": v.id,
				"productId": v.productId,
				"man": v.man
			}))
			let guizes = JSON.stringify(guizes_list);
			let params = {
				...this.form,
				guizes: guizes,
				pdtIds: pdtIds,
			};

			if (!this.form.title) {
				alertErr('请设置活动标题')
				return
			}
			if (!this.datetime_range.length) {
				alertErr('请设置活动时间')
				return
			}
			if (!this.condition_product.length) {
				alertErr('请设置活动商品')
				return
			}
			if (!this.gift_product.length) {
				alertErr('请设置赠品')
				return
			}

			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "yingxiao_saveSeckill",
					type: 1, //促销规则：1-满赠 2-满减 3-满折 4-秒杀
					...params,
				},
			}).then((res) => {
				if (res.code == 200) {
					this.$router.push('/gift-list')
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			});
		},



	},
};
</script>

<style scoped lang="less">
/deep/ .upload-image .el-upload {
	width: 100px;
	height: 100px;
	line-height: 98px;
}

/deep/ .upload-video .el-upload {
	width: 100px;
	height: 100px;
	line-height: 98px;

	background-color: #fbfdff;
	border: 1px dashed #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
	vertical-align: top;
}

/deep/ .el-upload-list__item {
	background: #eef6ff !important;
	font-size: 16px;
}

.video-preview-box {
	margin-top: 20px;
}





.footer-actions {
	display: flex;
	justify-content: flex-end;
	justify-content: center;
	position: fixed;
	z-index: 100;
	bottom: 0;
	right: 0;
	left: 230px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 1px 0 #ccc;
	// padding-right: 35px;
	margin-right: 18px;
}





// .el-radio-group.column {
//   display: flex;
//   flex-direction: column;
// }

.tip-input {
	margin-left: 20px;
	display: inline-block;
	max-width: 150px;
}

.time-divider {
	margin: 0 15px;
}

.page-wrap {
	.page-inner {}
}

.page-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

.section-title {
	margin-bottom: 20px;
	width: 100%;
	height: auto;
	line-height: 46px;
	background: rgb(241, 242, 245);
	padding-left: 30px;
	font-size: 16px;
	font-weight: 600;
}

.panel-item {
	padding-bottom: 100px;
	// .flex();
	// flex-wrap: wrap;

	.input-item {
		margin-bottom: 20px;
		width: 100%;
		max-width: 800px;
		// width: 50%;

		&.hidden-item {
			display: none;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.input-box {
			width: 100%;
			display: flex;
			align-items: flex-start;

			.label {
				height: 32px;
				line-height: 32px;
				min-width: 160px;
				min-width: 100px;
				text-align: right;
				margin-right: 40px;
				font-size: 20px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666666;

				&.required {
					position: relative;

					&:after {
						content: "*";
						color: #f00;
						position: absolute;
						right: -15px;
						top: 3px;
						// font-weight: bold;
					}
				}

				&.hidden {
					visibility: hidden;
				}
			}
		}

		//输入框组
		.inputs {
			.flex();

			.date-box {
				flex: 1;
			}

			.shuru-box {
				margin-left: 20px;
				flex: 4;
			}
		}

		.val {
			flex: 2;
			font-size: 20px;
			font-family: PingFang SC;
			color: #000000;

			.shuru {
				width: 100%;
				padding-left: 20px;
				outline: none;
				height: 40px;
				background: #ffffff;
				border: 1px solid #d4d8eb;
				border-radius: 4px;
				font-size: 16px;
			}

			.form-ele {
				.el-input {
					width: 100%;
				}

				.el-select {
					width: 100%;
				}

				.el-cascader {
					width: 100%;
				}
			}

			.input-tip {
				line-height: 32px;
				font-size: 14px;
				font-family: PingFang SC;
				color: #666;
			}
		}
	}
}

// 标签
.tag-wrap {

	// 标签样式
	.cus-tag-item {
		margin-right: 15px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.cus-tag-input {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		outline: 0;
		padding: 0 15px;
		width: 90px;
		height: 32px;
		line-height: 32px;
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

		&:focus {
			border-color: #66b1ff;
		}
	}

	// 标签样式

	.table-box {
		width: 100%;
		border-collapse: 0;
		/* table-layout: fixed; */
		border: 1px solid #eee;
		font-size: 14px;
	}

	.table-box tr {
		/* min-height: 40px; */
	}

	.table-box th {
		text-align: left;
		padding: 10px 10px;

		border-right: 1px solid #eee;
	}

	.table-box td {
		text-align: left;
		padding: 10px 10px;
		border-top: 1px solid #eee;
		border-right: 1px solid #eee;
	}

	.table-box td:nth-child(1) {
		width: 20%;
	}

	.table-box td:nth-child(2) {
		width: 80%;
	}

	.table-box .tag-item {
		cursor: pointer;
		outline: none;
		user-select: none;
		margin-right: 10px;
		display: inline-flex;
		align-items: center;
		color: #333;
	}

	.table-box .tag-item:before {
		content: "";
		width: 20px;
		height: 20px;
		display: inline-block;
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		margin-right: 3px;
	}

	.table-box .tag-item.checked:before {
		background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
	}
}


.loop-add {
	margin-top: 20px;
}
</style>